<template>
  <!--
    时间：2024年10月17日 09点47分
    关于geoServer发布的地图服务，复习
  -->
  <div class="app-box">
    <div id="map-box" class="map-box"></div>


    <el-button @click="exportMapBtn" style="position: absolute;top: 0; left: 0;">导出地图</el-button>
  </div>
</template>
<script setup>
import * as Cesium from "cesium";
import {onMounted} from "vue";
import {Cartesian3} from "cesium";

const token = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIwMzZhYjBmNy04MGU0LTRhYmUtYjZiNy0wYjYzNzBkNjdjZGQiLCJpZCI6MjE2OCwiaWF0IjoxNjY3MDM4MTQ5fQ.GNh4g9vd4Zikl-IDk7Ehr8GOe-APZqKgqA7dkBs3bTo";
let viewer;
onMounted(() => {
  Cesium.Ion.defaultAccessToken = token;
  //初始化地图
  viewer = new Cesium.Viewer('map-box', {
    animation: false,
    imageryProvider: false,
    fullscreenButton: false,
    geocoder: false,
    homeButton: false,
    infoBox: false,
    sceneModePicker: false,
    selectionIndicator: false,
    timeline: false,
    navigationHelpButton: false,
    scene3DOnly: true,
    orderIndependentTranslucency: false,
    contextOptions: {
      webgl: {
        alpha: true
      }
    }
  });
  //WebMapTileServiceImageryProvider 加载瓦片地图服务
  const xingJiangProvider = new Cesium.WebMapTileServiceImageryProvider({
    url: "http://192.168.1.100:6080/arcgis/rest/services/%E6%96%B0%E7%96%86%E5%BD%B1%E5%83%8F/%E9%98%BF%E5%85%8B%E8%8B%8F%E5%9C%B0%E5%8C%BA_%E5%B7%B4%E9%9F%B3_%E5%96%80%E4%BB%80%E5%9C%B0%E5%8C%BA_%E5%92%8C%E7%94%B0%E5%9C%B0%E5%8C%BA/MapServer/WMTS",
    // url: "http://192.168.1.112:6080/arcgis/rest/services/%E6%A0%AA%E6%B4%B2%E5%B8%82%E7%94%B5%E5%AD%90%E5%9C%B0%E5%9B%BE/MapServer",
    layer: "阿克苏地区_巴音_喀什地区_和田地区",
    style: "",
    tileMatrixSetID: "",
    // tilingScheme: new Cesium.GeographicTilingScheme(),
    maximumLevel: 18,
    minimumLevel: 0,
    format: "image/png"
  });

  // const xingJiangProvider = Cesium.ArcGisMapServerImageryProvider.fromUrl("http://192.168.1.100:6080/arcgis/rest/services/%E6%96%B0%E7%96%86%E5%BD%B1%E5%83%8F/%E9%98%BF%E5%85%8B%E8%8B%8F%E5%9C%B0%E5%8C%BA_%E5%B7%B4%E9%9F%B3_%E5%96%80%E4%BB%80%E5%9C%B0%E5%8C%BA_%E5%92%8C%E7%94%B0%E5%9C%B0%E5%8C%BA/MapServer/WMTS",{
  //   layers:"阿克苏地区_巴音_喀什地区_和田地区",
  // }).then((result)=>{
  //   viewer.imageryLayers.addImageryProvider(result);
  // });

  const zhuZhouProvider = Cesium.ArcGisMapServerImageryProvider.fromUrl("http://192.168.1.112:6080/arcgis/rest/services/%E6%A0%AA%E6%B4%B2%E5%B8%82%E7%94%B5%E5%AD%90%E5%9C%B0%E5%9B%BE/MapServer", {
    rectangle: []
  });
  zhuZhouProvider.then((result) => {
    viewer.camera.flyTo({
      duration: 1,
      // destination: Cartesian3.fromDegrees(113.1744, 27.8416, 4000.0),
      destination: Cartesian3.fromDegrees(114.0113, 27.8303, 4000.0),
    });
    viewer.imageryLayers.addImageryProvider(result);
  });
  viewer.imageryLayers.addImageryProvider(xingJiangProvider);
});

/**
 * @description 导出地图图片
 */
function exportMapBtn() {
  const url = `http://192.168.1.100:6080/arcgis/rest/services/%E6%96%B0%E7%96%86%E5%BD%B1%E5%83%8F/%E9%98%BF%E5%85%8B%E8%8B%8F%E5%9C%B0%E5%8C%BA_%E5%B7%B4%E9%9F%B3_%E5%96%80%E4%BB%80%E5%9C%B0%E5%8C%BA_%E5%92%8C%E7%94%B0%E5%9C%B0%E5%8C%BA/MapServer/export?bbox=8181164.94777054%2C4331328.063721622%2C1.0551711009906482E7%2C5694057.226559657&bboxSR=&layers=&layerDefs=&size=&imageSR=&format=png&transparent=true&dpi=&time=111&layerTimeOptions=&dynamicLayers=&gdbVersion=&mapScale=&f=image`;
  // 创建a标签
  const link = document.createElement('a');
  // 设置a标签为不可见
  link.style.display = 'none';
  // 将a标签添加到body
  document.body.appendChild(link);
  // 设置a标签的href
  link.href = url;
  // 设置a标签的download
  link.download = '地图';
  // 模拟点击事件进行下载
  link.click();
  // 下载完成后移除a标签
  document.body.removeChild(link);

}


</script>
<style scoped>
.app-box {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.map-box {
  width: 100%;
  height: 100%;
}

.menu-box {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 10;
}

.popup-box {
  position: absolute;
  background: #ffffff;
  color: #000000;
  z-index: 10;
  top: 0;
  left: 0;
  width: 200px;
}

.popup-message-content {
  display: flex;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  padding: 5px;
}

.popup-content-left {
  width: 150px;
}

.popup-left-top {
  display: flex;
  font-size: 13px;
  color: #0d7af9;
}

.popup-left-top img {
  width: 50px;
  height: 50px;
}

.popup-left-top-content div {
  width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.popup-left-image {
  display: block;
  margin: 0 auto;
  width: 120px;
  height: 100px;
}

.popup-box-ul {
  color: #ffffff;
}

.popup-box-ul li {
  color: #ffffff;
}

</style>
